{layout name="lottery/header" /}

<div id="app">
    <div class="lottery-wrapper j_wrapper need-img" >
        <p class="record-back" @click="location.replace('/index/lottery/info/id/'+prize.lottery_id)">返回</p>
        <div class="prize">
            <div class="prize1">
                <div class="prize-icon">
                    <!--各种奖品对应的图片 读取trs-->
                    <img class="j_prize_nimg" :src="prize.img">
                </div>
                <p class="prize-name j_prize_name ">{{prize.name}}</p>
            </div>
        </div>

        <div class="fill-info">
            <p class="fill-title">完善领奖信息 奖品即刻送到</p>
            <p class="fill-tips">
                <img src="lottery_static/img/warn_icon.png" style="width: 12px;height: 12px;margin-top: -1px">
                请如实填写联系方式，登记后工作人员会与您联系核实相关身份信息以便发放奖品。
            </p>

            <div class="input-area ">
                <table>
                    <tr>
                        <td>
                            <label><img class="sign_icon" src="lottery_static/img/sign_icon.png">姓&nbsp;&nbsp;&nbsp;&nbsp;名</label>
                        </td>
                        <td colspan="2">
                            <input class="must username" v-model="prize.link_name" type="text" placeholder="请输入姓名">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label><img class="sign_icon" src="lottery_static/img/sign_icon.png">电&nbsp;&nbsp;&nbsp;&nbsp;话</label>
                        </td>
                        <td colspan="2">
                            <input class="must phone" v-model="prize.link_tel" type="text" placeholder="请输入电话" maxlength="11">
                        </td>
                    </tr>
                    <!--虚拟物品没有地址栏-->
                    <tr>
                        <td>
                            <label><img class="sign_icon" src="lottery_static/img/sign_icon.png">地&nbsp;&nbsp;&nbsp;&nbsp;址</label>
                        </td>
                        <td colspan="2">
                            <input class="must address"v-model="prize.link_address" type="text" placeholder="请输入收件地址">
                            <input class="hide email" type="text" placeholder="">
                        </td>
                    </tr>
                </table>
                <div class="tips"></div>

                <p class="submit-btn active " @click="submit()">
                    领取
                </p>
            </div>
        </div>
    </div>

    <div class="popup j-apply-popup hide">
        <div class="popup_card ">
            <div class="popup_qa">
                <div class="popup_title"></div>
                <div class="popup_content">
                    <i class="i-done"></i>
                    <p class="succ01">提交成功</p>
                    <p>工作人员会与您联系核实相关信息</p>
                    <p>&nbsp;</p>
                    <div class="get-btn">
                        <a href="#">确定</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {include file="lottery/extend"}
    <!--蒙层 end-->
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            prize:{$prize}
        },
        created:function () {
            this.handelImg();
        },
        methods:{
            submit:function () {
                var _this =this;
                if(_this.prize.link_name == '' || _this.prize.link_name.length >20){
                    layer.open({
                        content: '请输入姓名'
                        , skin: 'msg'
                        , time: 2 //2秒后自动关闭
                    });
                    return false;
                }
                if(_this.prize.link_tel == ''){
                    layer.open({
                        content: '请输入电话'
                        , skin: 'msg'
                        , time: 2 //2秒后自动关闭
                    });
                    return false;
                }
                var reg = /^\d{11}$/;
                if(!reg.test(_this.prize.link_tel)){
                    layer.open({
                        content: '电话格式不正确'
                        , skin: 'msg'
                        , time: 2 //2秒后自动关闭
                    });
                    return false;
                }
                if(_this.prize.link_address == '' || _this.prize.link_name.link_address >100){
                    layer.open({
                        content: '请输入收件地址'
                        , skin: 'msg'
                        , time: 2 //2秒后自动关闭
                    });
                    return false;
                }
                var data = {
                    id:_this.prize.id,
                    link_name:_this.prize.link_name,
                    link_tel:_this.prize.link_tel,
                    link_address:_this.prize.link_address,
                }
                $.post("{:url('saveAddress')}",data,function (res) {
                    console.log(res);
                    layer.open({
                        content: res.msg
                        , skin: 'msg'
                        , time: 2 //2秒后自动关闭
                    });
                    if(res.code){
                        setTimeout(function () {
                            window.location.href = "{:url('myList')}"+"/id/"+_this.prize.lottery_id;
                        },1500)
                    }
                },'json')
            },
            handelImg:function(){
                $('.j_prize_nimg').each(function() {
                var maxWidth = window.innerWidth; // 图片最大宽度
                //var maxHeight = 100; // 图片最大高度
                var ratio = 0; // 缩放比例
                var width = $('.j_prize_nimg').width(); // 图片实际宽度
                var height = $('.j_prize_nimg').height(); // 图片实际高度

                // 检查图片是否超宽
                    if (width > maxWidth) {
                        ratio = maxWidth / width; // 计算缩放比例
                        $('.j_prize_nimg').css("width", "100%"); // 设定实际显示宽度
                        height = height * ratio; // 计算等比例缩放后的高度 
                        $('.j_prize_nimg').css("height", height); // 设定等比例缩放后的高度
                    }
                })
            }
        }
    })
</script>
